<template>
  <div class="app-container">
    <el-button
      type="primary"
      style="margin-bottom: 10px"
      @click="centerDialogVisible = true"
      >添加收费标准</el-button
    >
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" label="ID" width="100">
        <template slot="header">
          <el-tooltip
            class="item"
            effect="dark"
            content="收费ID唯一标识"
            placement="right-start"
            ><span>ID <i class="el-icon-warning"></i></span>
          </el-tooltip>
        </template>
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="200" align="center" label="收费金额">
        <template slot-scope="{ row }">
          <template v-if="row.edit">
            <el-input
              v-model="row.amount"
              type="number"
              class="edit-input"
              size="small"
            />
          </template>
          <span v-else>{{ row.amount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="收费说明" align="center">
        <template slot-scope="{ row }">
          <template v-if="row.edit">
            <el-input v-model="row.ex_desc" class="edit-input" size="small" />
          </template>
          <span v-else>{{ row.ex_desc }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="{ row }">
          <el-button
            v-if="row.edit"
            type="success"
            size="small"
            icon="el-icon-circle-check-outline"
            @click="upCharge(row)"
          >
            Ok
          </el-button>
          <el-button
            v-else
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="row.edit = !row.edit"
          >
            修改
          </el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-edit"
            @click="deleCharge(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加楼栋 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      @close="clearForm"
      :close-on-click-moda="false"
      center
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="收费说明" prop="ex_desc">
          <el-input v-model="form.ex_desc"></el-input>
        </el-form-item>
        <el-form-item label="收费金额" prop="amount">
          <el-input v-model="form.amount" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCharge">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  apiGetChargeList,
  apiSetDeleCharge,
  apiSetAddCharge,
  apiSetUpCharge,
} from "@/api/charge";

export default {
  name: "InlineEditTable",
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      list: null,
      listLoading: true,
      centerDialogVisible: false,
      form: {
        ex_desc: "", //收费说明
        amount: "", //收费金额
      },
      rules: {
        ex_desc: [
          { required: true, message: "请输入收费说明", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10个字符", trigger: "blur" },
        ],
        amount: { required: true, message: "请输入收费金额", trigger: "blur" },
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      this.listLoading = true;
      const { data } = await apiGetChargeList();

      const items = data;
      this.list = items.map((v) => {
        this.$set(v, "edit", false); // https://vuejs.org/v2/guide/reactivity.html
        return v;
      });
      console.log(this.list);
      this.listLoading = false;
    },
    upCharge(row) {
      if (!row.ex_desc && !row.amount) {
        this.$message.error("数据不能为空");
        return false;
      }
      apiSetUpCharge(row).then((res) => {
        this.$message.success("修改成功");
        this.getList();
        row.edit = false;
      });
    },
    addCharge() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          apiSetAddCharge(this.form).then((res) => {
            this.$message.success("添加成功");
            this.getList();
            this.centerDialogVisible = false;
          });
        } else {
          this.$message.error("请填写正确信息");
          return false;
        }
      });
    },
    deleCharge(id) {
      apiSetDeleCharge({ id }).then((res) => {
        this.$message.success("删除成功");
        this.getList();
      });
    },
    clearForm() {
      this.form = {
        ex_desc: "",
        amount: "",
      };
    },
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 0;
}
.edit-input >>> .el-input__inner {
  text-align: center;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>